<template>
  <div class="discover">
    <div class="banner">
      <div class="wrap">
        <div class="wrap-item">
          <carousel :listImg="listImg"></carousel>
          <div class="downloadClient">
            <router-link to="/download"></router-link>
            <p>PC 安卓 IPhone WP iPad Mac 六大客户端</p>
          </div>
        </div>
      </div>
    </div>
    <div class="hotRecommend">
      <div class="wrap">
        <hotRecommend :recommendMusicList="recommendMusicList"></hotRecommend>
      </div>
    </div>
    <div class="newAlbum">
      <div class="wrap">
        <newAlbum :newAlbumList="newAlbumList"></newAlbum>
      </div>
    </div>
    <div class="leaderboard">
      <div class="wrap">
        <leaderboard :leaderboardList="leaderboardList"></leaderboard>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import carousel from '../carousel/carousel.vue'
  import hotRecommend from '../hotRecommend/hotRecommend.vue'
  import newAlbum from '../newAlbum/newAlbum.vue'
  import leaderboard from '../leaderboard/leaderboard.vue'
  const ERROk = 200
  export default {
    data() {
      return {
        listImg: [],
        recommendMusicList: [],
        newAlbumList: [],
        leaderboardList: []
      }
    },
    created() {
      this.$ajax.get('/banner').then((response) => {
        if (response.data.code === ERROk) {
          this.listImg = response.data.banners
        }
      })
      this.$ajax.get('/personalized').then((response) => {
        if (response.data.code === ERROk) {
          this.recommendMusicList = response.data.result
        }
      })
      this.$ajax.get('/top/album?offset=0&limit=10').then((response) => {
        if (response.data.code === ERROk) {
          this.newAlbumList = response.data.albums
        }
      })
      // 飙升榜、新歌榜、原创榜
      this.getLeaderboard(3)
      this.getLeaderboard(0)
      this.getLeaderboard(2)
    },
    methods: {
      getLeaderboard(id) {
        this.$ajax.get(`/top/list?idx=${id}`).then((response) => {
          if (response.data.code === ERROk) {
            this.leaderboardList.push(response.data.playlist.tracks.slice(0, 10))
            console.log(this.leaderboardList)
          }
        })
      }
    },
    components: {
      carousel,
      hotRecommend,
      newAlbum,
      leaderboard
    }
  }
</script>

<style>
  .discover .banner{
    background: #000;
  }
  .banner .banner-container1{
    height: 336px;
  }
  .hotRecommend,.newAlbum,.leaderboard{
    background: #f2f2f2;
  }
  .recommend{
    background: #fff;
  }
  .wrap-item{
    width: 100%;
    position: relative;
  }
  .downloadClient{
    position: absolute;
    z-index: 50;
    right: 60px;
    top: 0px;
    width: 250px;
    height: 336px;
    background: url('download.png') no-repeat;
  }
  .downloadClient a{
    display: inline-block;
    height: 55px;
    width: 214px;
    margin: 213px 0 0 20px;
  }
  .downloadClient p{
    font-size: 12px;
    color: #8d8d8d;
    margin:10px 0;
    text-align: center;
  }
</style>
